<template>
<!--  搜索框-->
  <van-search
      v-model="search_msg"
      placeholder="请输入搜索关键词"
      :show-action="showAction"
      reverse-color
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
  />
<!--  间隔区-->
  <div class="jiange"></div>
<!--  添加按钮-->
  <div class="fab-container" @click="go_addtalk">
    <button class="floating-action-button">
      <van-icon name="edit" />
    </button>
  </div>
<!--  讨论区-->
  <div class="jsjl_list_big">
    <h3 style="color: #682757">交流社区</h3>
    <div v-for="item in jljl_data" :key="item.postId" class="jsjl-item" @click="jsjl_list(item)">
      <div class="jsjl_list_center">
<!--        头像-->
        <div class="jsjl_list_left">
          <img :src="item.avatarResourcePath" alt="achievement" class="achievement-image-tx" />
          <span class="author">{{ item.teacherName }}</span>
        </div>
<!--        标题+正文内容-->
        <div class="jsjl_list_right">
          <h3 class="jsjl_list_title">{{ limitText(item.title, 15) }}</h3>
          <p class="jsjl_list_nr">{{ limitText(item.content, 30) }}</p>
        </div>
        <div class="jsjl_img">
          <ul>
            <li></li>
          </ul>
          <img :src="item.contentResourcePath" alt="achievement" class="achievement-image" />
        </div>
      </div>
      <div class="author-date">
        <span>{{ formatDate(item.createTime) }}</span>
      </div>
    </div>
    <br/>
  </div>
</template>

<script setup >
import {onMounted, ref} from "vue";
import router from "../../Router/index.js";
import {getTeachingPostUsingPost} from "../../Api/jiaoshimokuai.js";
import { useTeachingPostStore } from "../../Store/modules/JSJL/JSJLStore"


let search_msg = ref("")
let showAction = false
const jljl_data = ref([]);
const TeachingPostStore = useTeachingPostStore()

async function getJSJLList() {
  try {
    const response = await getTeachingPostUsingPost({
      page: 1
    })
    jljl_data.value = response.data.data
  }catch (err){
    console.log(err)
  }
}

// 定义日期格式化方法
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toISOString().split('T')[0]; // 提取日期部分
}

// 定义限制字数的方法
function limitText(text, limit) {
  if (!text) return '';
  if (text.length <= limit) return text; // 如果文本长度小于等于限制长度，直接返回
  return text.slice(0, limit) + '...'; // 截取指定长度并添加省略号
}

async function onSearch(){
  // this.$toast(value);
  try {
    const response = await getTeachingPostUsingPost({
      keyword: search_msg.value
    })
    jljl_data.value = response.data.data

  }catch (err){
    console.log(err)
  }
}
function onCancel(){
  showAction = true
}

function onFocus(){
  showAction = false
}

function go_addtalk(){
  router.push("/addtalk")
}

function jsjl_list(PostStore){
  // localStorage.setItem("talkId", talkId)
  TeachingPostStore.fetchPostDetail = PostStore
  // console.log(TeachingPostStore.fetchPostDetail)
  router.push("/JSJLXQView")
}
onMounted(() => {
  getJSJLList();
});

</script>

<style scoped>
.jiange{
  width: 100%;
  height: 5px;
  background-color: lightgrey;
}
.jsjl_list_big {
  overflow-y: auto; /* 允许垂直滚动 */
  padding: 10px; /* 内边距 */
}
.jsjl-item {
  display: flex;
  flex-direction: column; /* 垂直排列内容 */
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding: 10px;
  //background-color: #f9f9f9;
}

.achievement-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-right: 10px;
}
.achievement-image-tx {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-right: 10px;
}

.author-date {
  justify-content: space-between;
  font-size: 14px;
  color: #888;
  text-align: right;
}
.author{
  font-size: 14px;
  color: #888;
}
.jsjl_list_title{
  font-size: 16px;
}
.jsjl_list_nr{
  font-size: 13px;

}
.jsjl_list_left{
  display: inline-block;
  width: 15%;
  float: left;
  text-align: center;
}
.jsjl_list_right{
  display: inline-block;
  width: 80%;
  float: right;
}
.jsjl_list_center{
  overflow: hidden;
}
.message {
  border: 1px solid #e2e2e2;
  width: 90%;
  margin: 12px auto 28px auto;
  background: #f6f6f6;
}
.fab-container {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 1000;
}

.floating-action-button {
  //background-color: rgba(104, 39, 87, 0.8);
  border: none;
  background-color: rgb(147,26,106);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  transition: all 0.3s ease-in-out;
  color: #f9f9f9;
}

.floating-action-button:hover {
  transform: scale(1.2);
}
</style>
